<template>
	<view>
		<movable-area class="move-area">
			<movable-view v-for="(item, index) in list" :key="index" :y="index * itemHeight" class="move-item" direction="vertical">
				<view class="item-seq">
					<view>{{item}}</view>
					<uni-icons type="bars" color="#ababab" size="25"></uni-icons>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['水果', '零食', '肉蛋', '蔬菜'],
				itemHeight: 50,
				
			}
		},
		methods: {
			
			
		}
	}
</script>
<style lang="scss">
	.move-area {
		width: 100vw;
		height: 400rpx;
		background-color: #fff;
		margin-top: 10px;
	}

	.move-item {
		width: 100%;
		height: 50px;
	}
	.item-seq {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ababab;
	}

	/* movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 150rpx;
		width: 150rpx;
		background-color: #007AFF;
		color: #fff;
	} */

	

	
</style>